import React, { useEffect, useState, useRef } from "react";
import { Space, Table, Button, message } from "antd";
import SearchNav from "./searchNav";
import { getGateWayApi } from "STORE/commonStore";
import lodash from "lodash";
import { initSearchValue } from "./searchNav";
import Utility from "UTIL/utility";
function Index(props) {
  const searchNavRef = useRef();
  const [bucketList, setBucketList] = useState([]);
  const [loading, setLoading] = useState(false);

  const [paginationParams, setPaginationParams] = useState({
    current: 1,
    pageSize: 10,
    showSizeChanger: false,
  });
  const [filterInfo, setFilterInfo] = useState(lodash.cloneDeep(initSearchValue));
  const columns = [
    {
      align: "center",
      title: "序号",
      dataIndex: "name",
      render: (_, __, index) => (paginationParams.current - 1) * paginationParams.pageSize + index + 1,
    },
    {
      align: "center",
      title: "文件名称",
      dataIndex: "name",
    },
    {
      align: "center",
      title: "上传时间",
      dataIndex: "lastModified",
    },
    {
      align: "center",
      title: "操作",
      dataIndex: "url",
      render: (_, record) => (
        <Button onClick={() => handleDownloadFile(record)} type="link" size="small" ghost>下载</Button>
      ),
    },
  ];

  useEffect(() => {
    getBucketList();
  }, [paginationParams.current, filterInfo]);
  function handleDownloadFile(record) {
    const { url, name } = record;
    Utility.downloadFile(url, name);
  }
  const handleTableChange = pagination => {
    setPaginationParams({ ...paginationParams, ...pagination });
  };
  function getBucketList() {
    setLoading(true);
    getGateWayApi({
      service: "internation/get_internation_list",
      bizContent: {
        ...filterInfo,
        prefix: filterInfo.filePath,
        "start-after": filterInfo.filePath,
      },
    })
      .then(result => {
        setBucketList(result);
      })
      .finally(() => setLoading(false));
  }
  function handleSearchNav(filter) {
    setFilterInfo({ ...filter });
    setPaginationParams({
      ...paginationParams,
      current: 1,
    });
  }

  return (
    <div className="content-margin">
      <div className="contract-list">
        <SearchNav {...props} search={handleSearchNav} ref={searchNavRef} />
        <div className="contract-list-table">
          <Table
            loading={loading}
            dataSource={bucketList}
            columns={columns}
            pagination={paginationParams}
            onChange={handleTableChange}
          />
        </div>
      </div>
    </div>
  );
}
export default Index;
